<template>
	<view class="box">
		<view class="title2 f-w">
			<view :class="active1===index?'c1':''" v-for="(item,index) in nameList" :key="index"
				@click="checkType(index)">{{item.title}}</view>
		</view>
		<!-- 商家列表 -->
		<view class="list">
			<view class="flex" v-for="(item,index) of shopList" :key="index" @click.stop="goshopinfo(item.mer_id)">
				<!-- 图片 -->
				<view class="shop-img">
					<image :src="item.mer_avatar" mode="aspectFit"></image>
				</view>
				<!-- 店铺信息 -->
				<view class="shop-right fh-bt">
					<view class="shop-one fw-bt">
						<view class="bold f30">{{item.mer_name}}</view>
						<view class="f22 tag" v-if="item.mer_keyword">{{item.mer_keyword}}</view>
					</view>
					<view class="shop-two fw-bt">
						<!-- 评分销量 -->
						<view class="shop-two1 f-w">
							<view class="f-w">
								<uni-rate :value="item.product_score" allow-half size="12" color="#bbb"
									active-color="#FCA223" :readonly="true" />
								<text class="f26 c2" style="margin-left: 4rpx;">{{item.product_score}}</text>
							</view>
							<view class="f-w num">
								<view>月售{{item.sales}}</view>
							</view>
						</view>
						<!-- 配送时长 距离 -->
						<view class="shop-two2 f-w">
							<view class="time" v-if="item.km">{{item.time}}分钟</view>
							<view>{{item.km?item.km+'km':''}}</view>
						</view>
					</view>
					<view class="shop-three f-w">
						<view class="price">起送¥{{item.starting_price}}</view>
						<view class="line"></view>
						<view>{{item.price2>0?`运费￥${item.price2}`:'免配送费'}}</view>
					</view>
					<!-- 有活动时 -->
					<view class="huodong">
						<view class="shop-four f-w" v-if="item.merchantValidCoupon.length>0">
							<view class="tag1" :class="it1.isget?'tag2':''"
								v-for="(it1,ind1) of item.merchantValidCoupon" :key="ind1" v-if="ind1 < 3" @click.stop="lingquan(it1)">
								{{it1.isget?`已领${it1.coupon_price}元券`:`领${it1.coupon_price}元叠加券`}}
							</view>
						</view>
						<view class="shop-five" v-if="item.merchantValidCoupon.length>0">
							<!-- 未展开 -->
							<block v-if="!item.isOpen">
								<view class="f-w" v-for="(it2,ind2) of item.merchantValidCoupon" :key="ind2"
									v-if="!it2.isget&&it2.type==3 && ind2 < 3">
									<view class="tag3">运费</view>
									<view>{{it2.title}}</view>
								</view>
							</block>
							<!-- 展开 -->
							<block v-else>
								<view class="f-w" v-for="(it2,ind2) of item.merchantValidCoupon" :key="ind2"
									v-if="!it2.isget">
									<view class="tag3" v-if="it2.type==3">运费</view>
									<view class="tag4" v-else>满减</view>
									<view>{{it2.title}}</view>
								</view>
							</block>
							<!-- <u-transition :show="true" v-else>
							    <view class="transition">
									
								</view>
							</u-transition> -->

						</view>
						<!-- 折叠按钮 -->
						<view class="xiala f-w" @click.stop="zhankai(index)">
							<image src="https://jw.xzsw2021.com/static/img/icon_63@2x.png" mode="" v-if="!item.isOpen">
							</image>
							<image src="https://jw.xzsw2021.com/static/img/icon_62@2x.png" mode="" v-else></image>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import Cache from '@/util/cache.js'
	export default {
		data() {
			return {
				position: "",
				id: "",
				page: 1,
				active1: 0, //附近商家默认
				rate: 5, //
				nameList: [{
						id: 1,
						title: '综合排序'
					},
					{
						id: 2,
						title: '销量最高'
					},
					{
						id: 3,
						title: '商家好评排序'
					},
				], //
				shopList: [], //商家列表
				myshop: '',
			}
		},
		onLoad(e) {
			try {
				this.myshop = JSON.parse(e.myshop)
			} catch (e) {
				this.myshop = JSON.parse(Cache.get('market'))
			}
			console.log(this.myshop)

			uni.getLocation({
				type: 'wgs84',
				success: res => {
					let obj = {
						lng: res.longitude,
						lat: res.latitude
					}
					this.position = obj
					this.getmerchart(this.page)
				},
				fail(err) {

				}
			});


		},
		onShow() {

		},
		onReachBottom() {
			this.getmerchart(this.page + 1)
		},
		methods: {
			goshopinfo(e) {
				uni.navigateTo({
					url: "/pages/client/shop/shop?id=" + e
				})
			},
			// 根据菜市场id获取商家列表
			getmerchart(e) {
				this.$request('store/merchant/lst', {
					mar_id: this.myshop.id,
					limit: 10,
					order: this.active1 == '0' ? 'rate' : this.active1 == '1' ? '' : 'delivery',
					page: e
				}, 'GET').then(res => {
					let arr = []
					res.data.list.forEach(async (item) => {
						item.merchantValidCoupon.forEach(item2 => {
							item.coupon.forEach(item3 => {
								if (item2.oupon_id == item3.coupon_id) {
									item2.isget = 1
								}
							})
						})

						item.isOpen = false
						item.lat = item.lat ? item.lat : this.myshop.latitude
						item.long = item.long ? item.long : this.myshop.longitude
						if (typeof this.position === 'object') {
							let res2 = await this.countkm(this.position.lat,
								this.position.lng, item.lat *
								1, item.long * 1)
							console.log(res2)
							if (typeof res2.data != 'undefined') {
								item.km = (res2.data.paths[0].distance / 1000).toFixed(2)
								item.time = parseInt(res2.data.paths[0].duration / 60)
							} else {
								item.km = 0
								item.time = 0
							}
						} else {
							item.km = 0
							item.time = 0
						}



						arr.push(item)
						if (arr.length == res.data.list.length) {
							if (e == 1) {
								this.shopList = res.data.list
							} else {
								if (res.data.list.length == 0) {
									uni.showToast({
										title: "暂无更多",
										icon: "none"
									})
									return
								}
								let list = this.shopList
								list = [...list, ...res.data.list]
								this.shopList = list
								this.page = e
							}
						}
					})






				})
			},
			// 根据经纬度计算距离
			// 根据经纬度计算距离
			countkm(lat1, lng1, lat2, lng2) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `https://restapi.amap.com/v4/direction/bicycling?origin=${lng1},${lat1}&destination=${lng2},${lat2}&key=c858b6921758e3f3400070929386564c`,
					}).then((response) => {
						let [error, res] = response;
						if (res) {
							resolve(res.data);
						} else {
							resolve({});
						}
					}).catch(error => {
						let [err, res] = error;
						reject(err)
					});
				})


			},


			// 切换类型
			checkType(index) {
				this.page = 1
				this.active1 = index;
				this.getmerchart(1)


			},
			// 商家领券
			lingquan(item) {
				if (!item.isGet) {
					console.log('领取优惠券', item.id)
				}
			},
			// 展开活动
			zhankai(index) {
				this.shopList[index].isOpen = !this.shopList[index].isOpen;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;

		.c1 {
			color: #109C7A;
			font-weight: bold;
		}

		.c2 {
			color: #FCA223;
		}

		.c3 {
			color: #F45E14;
		}

		.tag1 {
			margin-right: 10rpx;
			color: #F83535;
			font-size: 22rpx;
			padding: 2rpx 8rpx;
			background: rgba(16, 156, 122, 0);
			border: 1rpx solid #C94343;
			border-radius: 4rpx;
			margin-bottom: 6rpx;
		}

		.tag2 {
			background-color: #FFCDCD;
			border: 1rpx solid #FFCDCD;
		}

		.tag3 {
			margin-right: 10rpx;
			font-size: 22rpx;
			padding: 0 10rpx;
			color: #fff;
			background: linear-gradient(90deg, #388EF1, #1282EB);
			border-radius: 8rpx 0rpx 8rpx 0rpx;
		}

		.tag4 {
			margin-right: 10rpx;
			font-size: 22rpx;
			padding: 2rpx 10rpx;
			color: #fff;
			background: linear-gradient(90deg, #F84E45, #FF3125);
			border-radius: 8rpx 0rpx 8rpx 0rpx;
		}

		.title2 {
			padding: 28rpx 0;
			font-size: 28rpx;
			color: #999;

			&>view {
				margin-right: 50rpx;
			}
		}

		.list {
			&>view {
				width: 710rpx;
				// height: 160rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				.shop-img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}

				.shop-right {
					margin-left: 14rpx;
					flex: 1;

					.tag {
						padding: 2rpx 6rpx;
						background: #0CA01D;
						border-radius: 4rpx;
						color: #fff;
					}

					.shop-two,
					.shop-three {
						color: #666;
						font-size: 24rpx;
					}

					.shop-two {
						margin: 8rpx 0;

						.time {
							margin-right: 20rpx;
						}
					}

					.num {
						margin-left: 20rpx;
					}

					.line {
						// flex-shrink: 0;
						margin: 0 10rpx;
						width: 2rpx;
						height: 20rpx;
						background-color: #333;
					}

					.huodong {
						position: relative;

						.shop-four {
							margin-top: 20rpx;
							display: flex;
							flex-wrap: wrap;
						}

						.shop-five {
							margin-top: 10rpx;
							font-size: 22rpx;
							color: #555;

							&>view {
								margin-top: 10rpx;
							}
						}

						.xiala {
							position: absolute;
							top: 26rpx;
							right: 0;
							width: 80rpx;
							height: 50rpx;
							justify-content: flex-end;

							image {
								width: 26rpx;
								height: 12rpx;
							}
						}
					}

				}
			}

			&>view {
				margin-bottom: 40rpx;
			}
		}
	}
</style>
